<template>
  <div class="login">
    <div class="logoBox">
      <div class="login-logo">
        <img :src="logo" alt="">
      </div>
      <div class="logoTitle">
        虹桥镇智慧收运
      </div>
    </div>
    <div class="loadingBox" v-if="state.loadingShow">
      <van-loading color="#1989fa" />
    </div>
    <div class="login-body">
      <van-form @submit="onSubmit" class="formBox">
        <van-field :error="isUError" v-model="state.username" name="username" placeholder="请填写用户名" left-icon="manager"
          :center="true" :placeholder="isUError ? '请填写用户名' : '用户名'" />
        <van-field v-model="state.password" :error="isPError" type="password" name="password" placeholder="请填写密码"
          left-icon="lock" :placeholder="isPError ? '请填写密码' : '密码'" />
        <!-- <van-field center clearable label="验证码" placeholder="输入验证码" v-model="state.verify">
          <template #button>
            <vue-img-verify ref="verifyRef" />
          </template>
</van-field> -->
        <div>
          <van-button class="subBtn" round block type="info" native-type="submit">登录</van-button>
          <!-- <div class="register-box">
            <span>没有账号？</span>
            <span class="register-btn" @click="toggle('register')">点击此处注册</span>
          </div> -->
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import logo from "@/assets/images/logo.png"
import { reactive, ref, watch } from "vue";
import sHeader from "@/components/SimpleHeader.vue";
import vueImgVerify from "@/components/VueImageVerify.vue";
import { login, register } from "@/service/user";
import { setLocal } from "@/common/js/utils";
import md5 from "js-md5";
import { useRouter } from "vue-router";
const router = useRouter();
import { showSuccessToast, showFailToast } from "vant";
import { useStore } from "@/stores/user";


// 用户名的校验
const isUError = ref(false)
// 密码的校验
const isPError = ref(false)
// 是否第一次点击了登录
const isFisrtPress = ref(false)
const loginInfo = reactive({
  username: "",
  password: ""
})




const verifyRef = ref(null);
const state = reactive({
  loadingShow: false,
  username: "",
  password: "",
  username1: "",
  password1: "",
  type: "login",
  imgCode: "",
  verify: "",
});

watch(() => state, (newV, oldV) => {
  if (isFisrtPress.value) {
    const { username, password } = newV
    isUError.value = username ? false : true
    isPError.value = password ? false : true
  }
}, {
  deep: true
})

const store = useStore();
// 切换登录和注册两种模式
const toggle = (v) => {
  // state.type = v;
  // state.verify = "";
};

// 提交登录或注册表单
const onSubmit = async (values) => {
  // state.imgCode = verifyRef.value.state.imgCode || "";
  // if (state.verify.toLowerCase() != state.imgCode.toLowerCase()) {
  //   showFailToast("验证码有误");
  //   return;
  // }
  if (!state.username || !state.password) {
    if (!state.username) {
      isUError.value = true
    }
    if (!state.password) {
      isPError.value = true
    }
    isFisrtPress.value = true
    return
  }
  if (state.type == "login") {
    state.loadingShow = true;
    const obj = { username: state.username, password: state.password };
    store
      .login(obj)
      .then(() => {
        state.loadingShow = false;
        router
          .push({
            path: "/",
          })
          .catch(() => { });
      })
      .catch(() => {
        state.loadingShow = false;
      });
  } else {
    await register({
      loginName: values.username1,
      password: values.password1,
    });
    showSuccessToast("注册成功");
    state.type = "login";
    state.verify = "";
  }
};
</script>

<style lang="less">
@font-face {
  font-family: DFPZongYiW7;
  src: url("@/assets/font/DFPZongYiW7.TTF");
}

.loadingBox {
  // width: 100%;
  // height: 100%;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  position: fixed;
  top: 550px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
}

.formBox {
  .van-field {
    width: 634px;
    height: 100px;
    opacity: 1;
    border-radius: 20px;
    background: rgba(244, 248, 251, 1);
    font-size: 28px;
    font-weight: 500;
    color: #a6a6a6;
    margin: auto;
    margin-bottom: 40px;
  }

  ::v-deep.van-field__left-icon {
    margin-right: 24px;
  }
}

.login {
  .logoBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    // padding-top: 292px;
    text-align: center;
    // padding-bottom: 80px;
    background-image: url("@/assets/main-bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .logoTitle {
      margin-bottom: 115px; 
      font-family: DFPZongYiW7;

      font-size: 50px;
      letter-spacing: 2px;
      color: rgba(20, 71, 97, 1);

    }

    .login-logo {
      margin-top: 115px;  
      width: 188px;
      height: 188px;

      img {
        width: 100%;
      }
    }
  }

  .login-body {
    .inputLabel {
      font-size: 32px;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 44.8px;
      color: rgba(51, 51, 51, 1);
    }

    .inputLabel2 {
      margin-top: 25px;
    }

    .subBtn {
      width: 590px;
      height: 90px;
      line-height: 90px;
      border-radius: 55px;
      background: linear-gradient(160.78deg, rgba(0, 160, 252, 1) 0%, rgba(8, 173, 255, 1) 100%);
      font-size: 30px;
      font-weight: 700;
      letter-spacing: 4px;
      color: rgba(255, 255, 255, 1);
      margin: auto;
      margin-top: 80px;
      border: none;
    }

    .register-box {
      // width: 286px;
      height: 60px;
      line-height: 60px;
      margin: auto;
      margin-top: 40px;
      /** 文本1 */
      font-size: 26px;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 60px;
      color: rgba(166, 166, 166, 1);
      /** 文本2 */
      text-align: center;

      .register-btn {
        color: rgba(38, 172, 255, 1);
      }
    }
  }

  //***************滑块样式**** */
  .verify {
    box-sizing: border-box;
    touch-action: none;
    height: 120px;
    margin-top: 48px;
    padding-top: 20px;
  }

  ::v-deep .verify-bar-area {
    width: 100% !important;

    .verify-left-bar {
      // background: linear-gradient(160.78deg, rgba(29, 178, 255, 1) 0%, rgba(4, 123, 255, 1) 100%) !important;
      // border-color: rgba(29, 178, 255, 1);
    }

    .verify-move-block {
      // background-color: rgba(29, 178, 255, 1) !important;
      // background: linear-gradient(160.78deg, rgba(29, 178, 255, 1) 0%, rgba(4, 123, 255, 1) 100%) !important;
      color: #fff;
    }
  }
}
</style>
